<template>
  <div style="margin-bottom: 55px;">
    <!--官方榜单信息渲染-->
    <el-row style="border-bottom: 2px solid rgb(230,230,230)">
      <p style="margin-bottom: 10px;font-size: 22px;">官方榜</p>
    </el-row>

    <el-row :key="index" v-for="(item,index) in 4" style="margin-top: 25px;display: flex">

      <el-image :src="musicRankList[item-1].coverImgUrl" @click="toSongListPage(musicRankList[item-1].id)"
                style="height: 200px;width:200px;min-height: 200px;min-width:200px;border-radius: 15px;cursor:pointer"></el-image>
      <i class="el-icon-video-play"
         style="color: rgba(255,255,255,1);font-size: 45px;position: absolute;top: 155px;left:155px;z-index: 10"></i>
      <el-table :data="musicRankList[item-1].tracks" stripe max-height="139px"
                :show-header="false" style="border-radius: 15px;margin:30px 100px 0 50px;
                box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);min-width: 500px">
        <!--索引-->
        <el-table-column type="index">
          <template slot-scope="scope">
            <span style="color: red;font-weight: 400">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <!--歌名-->
        <el-table-column prop="first"></el-table-column>
        <!--歌手-->
        <el-table-column prop="second"></el-table-column>
      </el-table>

    </el-row>

    <!--全球榜-->
    <el-row style="border-bottom: 2px solid rgb(230,230,230)">
      <p style="margin-bottom: 10px;font-size: 22px;">全球榜</p>
    </el-row>

    <el-row>

      <el-col v-for="(item,index) in musicRankList.slice(4)" style="margin-top: 20px;position:relative;width: 200px;height: 230px;padding: 0 10px"
              :key="index">

        <!--播放量-->
        <div style="background: rgba(128,128,128,0.2);color: white;border-radius: 10px 10px 0 0;
                                    width: 90%;position:absolute;z-index: 10;">
          <div style="float:right;padding-right: 5px">
            <i class="el-icon-headset" style="margin-right: 5px;"></i>
            {{ item.playCount >= 10000 ? (item.playCount / 10000).toFixed(0) + '万' : item.playCount }}
          </div>
        </div>

        <div>
          <el-image :src="item.coverImgUrl" @click="toSongListPage(item.id)"
                    style="box-shadow: 0 0 2px 2px gray;border-radius: 10px;cursor: pointer">
          </el-image>
        </div>

        <h1 @click="toSongListPage(item.id)" style="cursor:pointer;text-align: center">{{ item.name }}</h1>

      </el-col>

    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //排行榜的所有数据
      musicRankList: [
        {
          coverImgUrl: ''
        },
        {
          coverImgUrl: ''
        },
        {
          coverImgUrl: ''
        },
        {
          coverImgUrl: ''
        }
      ],
      //歌手榜的信息
      singerRankInfo: {
        coverUrl: '',
        artists: []
      }
    }
  },
  created() {
    //获取官方榜单的数据
    this.getOfficialRankList()
  },
  methods: {
    //获得官方榜单的数据
    getOfficialRankList() {
      this.$http.get('toplist/detail').then(res => {
        this.musicRankList = res.data.list
        this.singerRankInfo = res.data.artistToplist
      })
    },
    //点击歌单跳转界面
    toSongListPage(id) {
      this.$router.push('/songlist/' + id)
    },
    //双击歌曲添加数据进去,并循环播放(向父组件传递参数)
    playMusicList(row) {
      this.$emit('setSongListInfo', window.localStorage.getItem('playlist'), row.id)
    },
  }
}
</script>

<style scoped>

</style>
